<template>
  <Card title="分面图样例" style="margin-top: 24px">
    <div style="height: 400px">
      <a-skeleton active :paragraph="{rows: 17}" v-if="actorAppearMaploading"/>
      <div v-else-if="renderData && renderData.length !== 0">
        <div :id="divId" style="height: 400px" :ref="divId" class="echartsbox"></div>
      </div>
      <div v-else class="nodata"></div>
    </div>
  </Card>
</template>
<script>
  import {COLOR_PLATE_16} from '@/utils/color'
  import G2 from '@antv/g2'

  export default {
    name: 'FacetDemo',
    props: {
      renderData: Array,
      divId: String
    },
    data() {
      return {
        actorAppearMaploading: false
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.moreColumnBar(this.renderData, this.divId)
      })
    },
    methods: {
      moreColumnBar(data, id) {
        let chart = new G2.Chart({
          container: id,
          forceFit: true,
          height: 400,
          padding: [0, 0, 0, 100]
        });
        chart.source(data, {
          name: {
            sync: true,
          },
          x: {
            sync: true,
          },
          y: {
            sync: true,
            tickCount: 3
          }
        });

        chart.legend(false);
        chart.facet('rect', {
          fields: [null, 'name'],
          showTitle: false,
          eachView: (view, facet) => {
            view.interval().position('x*y').color('name', COLOR_PLATE_16).shape('circle').opacity(0.9).size(2).tooltip('name*x*y', (a, b, c) => {
              return {
                title: a,
                name: '第' + b.split("-")[0] + '集第' + b.split("-")[1] + '场',
                value: c === 1 ? '出现' : '未出现'
              };
            });
            view.axis('x', {
              tickLine: null,
              label: null
            });
            view.axis('y', {
              tickLine: null,
              label: null
            });
            view.guide().text({
              position: ['0%', '50%'],
              offsetX: -100,
              content: facet.rowValue,
              style: {
                fontSize: 15,
                textAlign: 'left',
                rotate: 0,
                fontWeight: 700,
                fill: COLOR_PLATE_16[facet.rowIndex]
              }
            })
          }
        });
        chart.render()
      }
    }
  }

</script>
